<script setup>
import { reactive, ref,getCurrentInstance,computed } from 'vue'
import { reviewList2,getUserWallet } from '../../http/api'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const { proxy } = getCurrentInstance()
const { $t } = proxy;
let numberExchange = ref(proxy.$numberExchange)
const baseUrl = ref(import.meta.env.VITE_APP_BASE_URL)
locale.value = localStorage.getItem('lang') || 'zhCN'
const localeCom = computed(() => (locale.value === 'en' ?  en : zhCn ))
//返回顶部
const scrollTop = ref(0)
let $backTop = ref(proxy.$backTop)
$backTop.value(scrollTop.value)
// 用户信息对象
let userInfo = ref(undefined)
// 获取用户钱包信息
const getUserWalletFn = async()=>{
    let res = await getUserWallet()
    console.log(res,'res进去了49')
    if(res.code === 200){
        userInfo.value.balance = res.result.balance
    }
}
// 判断用户是否登录
let userInfos = localStorage.getItem('userInfo')
if (userInfos) {
    userInfo.value = JSON.parse(userInfos)
    getUserWalletFn()
}
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
}
const currentPage4s = ref(1)
const pageSize4s = ref(6)
let projectTotals = ref(0)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
let reviewsList = reactive({
    list: []
})
let isLookMore = ref(true)

let pageNo = ref(1)
// 获取评审列表
const getreviewList2 = async () => {
    if (!isLookMore.value) {
        return;
    }
    let res = await reviewList2({
        pageNo:pageNo.value,
        "pageSize": 6
    })
    if (res.records.length) {
        // projectTotals.value = res.total
        reviewsList.list.push(...res.records)
         // 如果没有更多数据需要加载，则设置isLookMore为false
         if (res.records.length < 6) {
                isLookMore.value = false;
            }

    }  else {
        isLookMore.value = false;
    }
    console.log(reviewsList, 'res554545')

}
const handleSizeChange2 = (val) => {
    console.log(`${val} items per page`)
    //   getfindToBeRedeemedPage(val)
    getreviewList2(1,val)
}
const handleCurrentChange2 = (val) => {
    console.log(`current page: ${val}`)
    //   getfindToBeRedeemedPage(val)
    getreviewList2(val)


}
// 查看更多按钮点击
const lookMore = () => {
    if(!isLookMore.value){
        return
    }
    
    pageNo.value += 1
    // isLookMore.value = true
    getreviewList2() 
   
}
getreviewList2(1)
let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
</script>
<template>
    <div class="homeBody"  :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }">
        <headNavigation  @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark" :menuTabWordIndex="3"   :userInfo="userInfo" @loginEmit="loginEmit"></headNavigation>

        <div class="modelTop">
            <div class="nowEggPng">
                <div class="nowEggPngDiv top16">
                    <div class="jiantoubox">
                        <div :style="{ color: isDark ? '#fff' : '#282828' }">{{$t('msg.message.Playerevaluationofus')}}</div>
                        <img class="jiantou" :src="isDark ? getImageUrl('whitejiantou.png') : getImageUrl('blackjiantou.png')" alt="">
                    </div>
                </div>
                <img :src="getImageUrl('title.png')" alt="">
            </div>
        </div>
        <div class="carBox" v-if="reviewsList.list.length">
            <Waterfall :width="450" :list="reviewsList.list">
                <template #item="{ item }">
                    <div class="carouselBox">
                        <div class="carouselBoxBot" style="padding-bottom: 0;padding-right: 0;">
                            <div class="carouselBoxHeaderBig">
                                <div class="carouselBoxHeader">
                                    <!-- <img src="../../assets/img/personCenter/logo.png" alt=""> -->
                                    <div>{{ item.userName }}</div>
                                </div>
                                <div class="evalDetailTopLike" v-if="item.reviewsType === 'TEXT'">
                                    <el-rate v-model="item.reviewsRate" :colors="['#f1f1f1', '#EA5151', '#EA5151']" disabled
                                        size="large" />
                                </div>
                            </div>
                        </div>

                        <div class="carouselImgBox" v-if="item.reviewsType != 'TEXT'">
                            <img v-if="item.reviewsType === 'IMG'" :src="baseUrl + '/sys/common/static/' + item.reviewsImg"
                                alt="">
                            <video v-else controls :src="baseUrl + '/sys/common/static/' + item.reviewsVideo"></video>
                        </div>
                        <div class="carouselBoxBot" v-if="item.reviewsType != 'TEXT'">
                            <div class="giftBox">
                                <div class="giftName">{{ item.giftName }}</div>
                                <div class="giftImg">
                                    <img src="../../assets/img/header/money.png" alt="">
                                    <div>{{numberExchange( item.giftValue) }}</div>
                                </div>
                            </div>
                            <div class="carouselBoxHeaderText">
                                {{ item.giftName }}
                            </div>
                        </div>
                        <div class="carouselBoxBot" v-else>
                            <div class="carouselBoxHeaderText" v-html="item.reviewsText">
                            </div>
                        </div>
                    </div>
                   
                </template>
            </Waterfall>
            <div class="loadMore">
                <div :class="locale != 'en' ? 'findMoreBtn' : 'findMoreBtn w216'"
                    :style="{ color: isDark ? '#fff' : '#000', background: isDark ? 'unset' : '#fff' }"  @click="lookMore">{{isLookMore ?  $t("msg.message.viewMore") : $t("msg.message.nothing")}}</div>
            </div>
            <!-- <div style="display: flex;justify-content: flex-end;width: 100%;">
                <el-config-provider :locale="localeCom">
                    <el-pagination v-model:current-page="currentPage4s" v-model:page-size="pageSize4s"
                    :page-sizes="[6, 12, 24, 48]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="projectTotals"
                    @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
                </el-config-provider>
               
            </div> -->
        </div>

    </div>

</template>
<style scoped>
.homeBody {
    overflow-x: hidden;
    max-width: 2560px;
    min-width: 1350px;
    min-height: 1200px;
    /* height: 100vh; */
    /* padding-bottom: 50px; */
    overflow-y: auto;
    /* background-color: #0F123F; */
    background: url('../../assets/img/home/bg.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 101px;
    padding-bottom: 50px;
    margin: 0 auto;
}

.carouselBox {
    box-shadow: 0px 7px 25px 0px #00000091;
    background: #282828;
    height: 100%;
    width: 450px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.carouselImgBox {
    width: 100%;
    /* height: 351px; */
}

.carouselImgBox img {
    width: 100%;
    /* height: 351px; */
}

.carouselImgBox video {
    width: 100%;
    height: 351px;
}

.carouselBoxBot {
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 25px 21px;
}

.carouselBoxHeaderBig {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
}

.carouselBoxHeader {
    width: 50%;
    display: flex;
    align-items: center;
}

.carouselBoxHeader img {
    width: 36px;
    border-radius: 50%;
    margin-right: 5px;
}

.carouselBoxHeader div {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.carouselBoxHeaderText {
    font-size: 16px;
}

.evalDetailTopLike {
    /* background: #fff; */
    display: flex;
    width: 40%;
    height: 38px;
    /* margin-bottom: 62px; */
}
.modelTop{
    padding-top: 20px;
}

.carBox {
    max-width: 2560px;
    margin: 0 180px;
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    padding-top: 24px;
}

.giftBox {
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    padding-bottom: 12px;
}

.giftName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.giftImg {
    display: flex;
    align-items: center;
}

.giftImg img {
    width: 18px;
    margin: 0 10px;
    margin-right: 5px;
}

.giftImg div {
    color: #FFAA00;
}
.nowEggPng{
    position: relative;
    width: 647px;
    display: flex;
    /* width: 100%; */
    margin-left: 240px;
    flex-direction: column;
    font-size: 44px;
}
.nowEggPng img {
    width:97px;
}
.jiantoubox{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jiantou{
    margin-left: 15px;
    width: 100px !important;
}
.realTime{
    font-size: 18px;
    color: #fff !important;
    padding-left: 2px;
}
.nowEggPngDiv{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 76px;
    font-size: 40px;
    top: 14px;
}
.w216{
    width: 256px !important;
}
.waterfall-list{
    background-color: unset !important;
}
.loadMore {
    display: flex;
    min-width: 100%;
    justify-content: center;
    /* margin: 0 240px; */
    padding: 30px 0 30px;
}
.findMoreBtn {
    font-size: 20px;
    color: #fff;
    border: 1px solid;
    display: flex;
    height: 38px;
    align-items: center;
    padding: 4px 15px;
    /* border-radius: 36px; */
    cursor: pointer;
    width: 146px;
    height: 54px;
    /* border-radius: 8px; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 2px solid #27D698;
}
@media screen and (max-width:1600px) {

.carBox{
    margin: unset;
}
.nowEggPng{
    margin-left: 60px;
}
}
@media screen and (max-width:1416px) {

.carouselBox{
width: 404px;
}
}
@media screen and (max-width:1325px) {

.carouselBox{
width: 390px;
}
.carBox{
    justify-content: center;
}
}

</style>